import {updateColor} from '@/utils/theme/transformTheme';
import {useColorMode} from '@vueuse/core';
import {watch} from 'vue';
import type {AppConfig} from '@/store/types';
import { useRootSetting } from '../setting/useRootSetting';

// 这个钩子的主要作用是：
// 统一管理主题模式的切换
// 在主题变化时自动更新应用配置和界面颜色
// 提供响应式的颜色状态给组件使用

export const useTheme = () => {
  // 使用 useColorMode 钩子获取当前颜色模式（可能是 'light' 或 'dark'
  // disableTransition: false 表示允许颜色切换时的过渡动画
  const color = useColorMode({disableTransition: false});

  const {appConfig, setAppConfigMode} = useRootSetting();

  const toggleDarkMode = () => {
    setAppConfigMode({themeMode: color.value as AppConfig['themeMode']});
  };

  // 当颜色变化时：
  // 调用 toggleDarkMode() 更新配置
  // 调用 updateColor 函数更新主题色（传入主色和当前主题模式）
  watch(color, () => {
    toggleDarkMode();
    updateColor(appConfig.value.primaryColor, color.value as AppConfig['themeMode']);
  });

  return {color};
};
